Position image in relation to containing element in HTML and CSS
Description
The following code shows how to position image in relation to containing element.
Example
<html>
<head>
<style type='text/css'>
p {<!--from w w w . ja v a 2 s . com-->
font: 12pt arial;
height: 300px;
}
img.baseline {
vertical-align: baseline;
}
img.middle {
vertical-align: middle;
}
img.sub {
vertical-align: sub;
}
img.super {
vertical-align: super;
}
img.text-top {
vertical-align: text-top;
}
img.text-bottom {
vertical-align: text-bottom;
}
img.top {
vertical-align: top;
}
img.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>Positioned in relation to containing element.</h2>
<p>
<img class="baseline" src="http://www.java2s.com/style/download.png" />The
image is vertically aligned using the value baseline
</p>
<p>
<img class="middle" src="http://www.java2s.com/style/download.png" />The
image is vertically aligned using the value middle
</p>
<p>
<img class="sub" src="http://www.java2s.com/style/download.png" />The
image is vertically aligned using the value sub
</p>
<p>
<img class="super" src="http://www.java2s.com/style/download.png" />The
image is vertically aligned using the value super
</p>
<p>
<img class="text-top" src="http://www.java2s.com/style/download.png" />The
image is vertically aligned using the value text-top
</p>
<p>
<img class="text-bottom"
src="http://www.java2s.com/style/download.png" />The image is
vertically aligned using the value text-bottom
</p>
<h2>Positioned in relation to line the element is part of:</h2>
<p>
<img class="top" src="http://www.java2s.com/style/download.png" />The
image is vertically aligned using the value text-bottom
</p>
<p>
<img class="bottom" src="http://www.java2s.com/style/download.png" />The
image is vertically aligned using the value text-bottom
</p>
</body>
</html>